<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <!-- 大海 -->
      <div class="ocean">
        <div class="wave wave-1"></div>
        <div class="wave wave-2"></div>
        <div class="wave wave-3"></div>
      </div>

      <!-- 海鸥 -->
      <div class="seagulls">
        <div class="seagull seagull-1"></div>
        <div class="seagull seagull-2"></div>
        <div class="seagull seagull-3"></div>
      </div>

      <!-- 微风粒子 -->
      <div class="breeze-particles">
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="particle particle-4"></div>
        <div class="particle particle-5"></div>
        <div class="particle particle-6"></div>
      </div>

      <!-- 海面反射 -->
      <div class="ocean-reflection"></div>
    </div>

    <!-- 登录表单卡片 -->
    <div class="login-card">
      <div class="login-header">
        <div class="logo">
          <img src="/favicon.ico" alt="Logo" class="logo-icon" />
          <h1 class="logo-text">爱吃兔溯源</h1>
        </div>
        <p class="welcome-text">欢迎回来，请登录您的账户</p>
      </div>

      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username" class="form-label">用户名</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
            <input id="username" v-model="formData.accountName" type="text" class="form-input"
              :class="{ 'error': errors.accountName }" placeholder="请输入用户名" @blur="validateField('username')" />
          </div>
          <span v-if="errors.accountName" class="error-message">{{ errors.accountName }}</span>
        </div>

        <div class="form-group">
          <label for="password" class="form-label">密码</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <input id="password" v-model="formData.accountPaw" :type="showPassword ? 'text' : 'password'"
              class="form-input" :class="{ 'error': errors.accountPaw }" placeholder="请输入密码"
              @blur="validateField('password')" />
            <button type="button" class="password-toggle" @click="showPassword = !showPassword">
              <svg v-if="showPassword" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
              </svg>
              <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
            </button>
          </div>
          <span v-if="errors.accountPaw" class="error-message">{{ errors.accountPaw }}</span>
        </div>

        <div class="form-options">
          <label class="checkbox-wrapper">
            <input v-model="formData.rememberMe" type="checkbox" class="checkbox" />
            <span class="checkbox-label">记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>

        <button type="submit" class="login-button" :disabled="isLoading">
          <span v-if="isLoading" class="loading-spinner"></span>
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
      </form>

      <div class="login-footer">
        <p class="footer-text">
          还没有账户？
          <a href="#" class="register-link">立即注册</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const formData = reactive({
  "accountName": "",
  "accountPaw": "",
  rememberMe: false
})

// 表单验证错误
const errors = reactive({
  accountName: '',
  accountPaw: ''
})

// 状态管理
const isLoading = ref(false)
const showPassword = ref(false)

// 表单验证
const validateField = (field: string) => {
  errors[field] = ''

  if (field === 'username') {
    if (!formData.accountName.trim()) {
      errors.accountName = '用户名不能为空'
      return;
    } else if (formData.accountName.length < 3) {
      errors.accountName = '用户名至少需要3个字符'
      return;
    }
  }

  if (field === 'password') {
    if (!formData.accountPaw) {
      errors.accountPaw = '密码不能为空'
      return;
    } else if (formData.accountPaw.length < 3) {
      errors.accountPaw = '密码至少需要3个字符'
      return;
    }
  }
}

// 验证整个表单
const validateForm = (): boolean => {
  validateField('username')
  validateField('password')
  return !errors.accountName && !errors.accountPaw
}

// 处理登录
const handleLogin = async () => {
  if (!validateForm()) {

    return
  }

  isLoading.value = true

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    axios.post("http://localhost:5264/api/Login/Login", formData).then(res => {
      if (res.data.code == 2000) {
        ElMessage.success(res.data.msg)
        localStorage.setItem("accountName", res.data.data.accountName)
        localStorage.setItem("realName", res.data.data.realName)
        localStorage.setItem("roleName", res.data.data.roleName)
        // 登录成功，跳转到主页
        router.push('/gettraceab')
      }
      else {
        ElMessage.error(res.data.msg)
      }
    })

  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E0F6FF 0%, #B8E6FF 30%, #87CEEB 70%, #4682B4 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 云朵 */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  animation: float-cloud 20s linear infinite;
}

.cloud:before,
.cloud:after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
}

.cloud-1 {
  width: 100px;
  height: 40px;
  top: 10%;
  left: -100px;
  animation-delay: 0s;
}

.cloud-1:before {
  width: 50px;
  height: 50px;
  top: -20px;
  left: 10px;
}

.cloud-1:after {
  width: 60px;
  height: 60px;
  top: -30px;
  right: 10px;
}

.cloud-2 {
  width: 80px;
  height: 30px;
  top: 25%;
  left: -80px;
  animation-delay: 8s;
}

.cloud-2:before {
  width: 40px;
  height: 40px;
  top: -15px;
  left: 8px;
}

.cloud-2:after {
  width: 45px;
  height: 45px;
  top: -20px;
  right: 8px;
}

.cloud-3 {
  width: 120px;
  height: 45px;
  top: 40%;
  left: -120px;
  animation-delay: 15s;
}

.cloud-3:before {
  width: 60px;
  height: 60px;
  top: -25px;
  left: 12px;
}

.cloud-3:after {
  width: 70px;
  height: 70px;
  top: -35px;
  right: 12px;
}

/* 大海 */
.ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, #1E90FF 0%, #4169E1 50%, #000080 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(to top, rgba(30, 144, 255, 0.3) 0%, transparent 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: wave-move 8s linear infinite;
}

.wave-1 {
  animation-delay: 0s;
  opacity: 0.8;
}

.wave-2 {
  animation-delay: 2s;
  opacity: 0.6;
}

.wave-3 {
  animation-delay: 4s;
  opacity: 0.4;
}

/* 海鸥 */
.seagulls {
  position: absolute;
  width: 100%;
  height: 100%;
}

.seagull {
  position: absolute;
  width: 30px;
  height: 20px;
  animation: seagull-fly 12s linear infinite;
}

.seagull:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 50% 50% 0 0;
  transform-origin: center;
  animation: wing-flap 1s ease-in-out infinite alternate;
}

.seagull:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 0 0 50% 50%;
  transform-origin: center;
  animation: wing-flap 1s ease-in-out infinite alternate-reverse;
}

.seagull-1 {
  top: 25%;
  left: -30px;
  animation-delay: 0s;
}

.seagull-2 {
  top: 35%;
  left: -30px;
  animation-delay: 4s;
}

.seagull-3 {
  top: 45%;
  left: -30px;
  animation-delay: 8s;
}

/* 微风粒子 */
.breeze-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: breeze-float 10s linear infinite;
}

.particle-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.particle-2 {
  top: 30%;
  left: 30%;
  animation-delay: 2s;
}

.particle-3 {
  top: 40%;
  left: 50%;
  animation-delay: 4s;
}

.particle-4 {
  top: 25%;
  left: 70%;
  animation-delay: 6s;
}

.particle-5 {
  top: 35%;
  left: 85%;
  animation-delay: 8s;
}

.particle-6 {
  top: 45%;
  left: 95%;
  animation-delay: 10s;
}

/* 海面反射 */
.ocean-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: reflection-shimmer 4s ease-in-out infinite;
}





/* 自然光晕 */
.natural-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(135, 206, 250, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* 动画定义 */
@keyframes float-cloud {
  0% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(calc(100vw + 100px));
  }
}

@keyframes wave-move {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}

@keyframes seagull-fly {
  0% {
    transform: translateX(-30px);
  }

  100% {
    transform: translateX(calc(100vw + 30px));
  }
}

@keyframes breeze-float {
  0% {
    transform: translateX(0px) translateY(0px);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(100px) translateY(-50px);
    opacity: 0;
  }
}

@keyframes reflection-shimmer {

  0%,
  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.3;
  }
}





@keyframes wing-flap {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(60deg);
  }
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.welcome-text {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.login-form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 20px;
  color: #999;
  z-index: 1;
}

.form-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #fff;
}

.form-input:focus {
  outline: none;
  border-color: #4682B4;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.1);
}

.form-input.error {
  border-color: #e74c3c;
}

.form-input.error:focus {
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: #4682B4;
}

.error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  accent-color: #4682B4;
}

.checkbox-label {
  font-size: 14px;
  color: #666;
}

.forgot-password {
  color: #4682B4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4682B4 0%, #5F9EA0 50%, #87CEEB 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 15px rgba(70, 130, 180, 0.3);
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.login-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e1e5e9;
}

.footer-text {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.register-link {
  color: #4682B4;
  text-decoration: none;
  font-weight: 600;
}

.register-link:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    padding: 30px 20px;
    margin: 10px;
  }

  .logo-text {
    font-size: 20px;
  }

  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>